import { Form, Input, Button, Checkbox, Card, message } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import { useHistory, useParams } from "react-router-dom";
import AdminsApi from "../../api/admins";
// eslint-disable-next-line
export default () => {
  let history = useHistory();
  //获取url中的参数
  const params = useParams();
  const user = params.username;
  const [form] = Form.useForm();
  if (user) {
    form.setFieldsValue({
      username: user,
    });
  }
  //事件绑定
  const onFinish = async (values) => {
    const { status, token } = await AdminsApi.login({
      username: values.username,
      password: values.password,
    });
    console.log({ status, token });
    if (status) {
      AdminsApi.setToken(token);
      message.success({
        content: "登录成功，即将跳转",
        duration: 1,
        onClose: () => {
          history.push("/info");
        },
      });
    } else {
      message.error({
        content: "登录失败，请重新登录",
        duration: 1,
      });
    }
  };
  return (
    <div
      className="site-card-border-less-wrapper backImg"
      style={{ minHeight: "100vh" }}
    >
      <h1 style={{ color: "#EFF5FB", position: "absolute", top: "45px", left: "645px" }}>舞东风后台管理系统</h1>
      <Card
        title="用户登录"
        bordered={false}
        style={{ width: 300, margin: "auto", marginTop: "20vh" }}
      >
        <Form
          name="normal_login"
          className="login-form"
          form={form}
          initialValues={{
            remember: true,
          }}
          onFinish={onFinish}
        >
          <Form.Item
            name="username"
            rules={[
              {
                required: true,
                message: "请输入用户名!",
              },
            ]}
          >
            <Input
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder="Username"
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: "请输入密码!",
              },
            ]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="Password"
            />
          </Form.Item>
          <Form.Item>
            <Form.Item name="remember" valuePropName="checked" noStyle>
              <Checkbox>记住我</Checkbox>
            </Form.Item>
            <a className="login-form-forgot" href="/">
              忘记密码
            </a>
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              className="login-form-button"
            >
              登录
            </Button>
            <div style={{ marginTop: "20px" }}>
              <a href="#/reg">立即注册!</a>
            </div>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};
